<%@page import="classes.LifebookUserSearchParameters"%>
<%@page import="java.util.List"%>
<%@page import="classes.LifebookImageSearchParameters"%>
<%@page import="classes.LifebookImage"%>
<%@page import="classes.DB"%>
<%@page import="classes.LifebookUser"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>

    <body style ="background-image:url('bg.png')">
        <%
            //User that is being viewed
            LifebookUser viewedUser = (LifebookUser) session.getAttribute("viewUser");
            //User current user that is logged in
            LifebookUser user = (LifebookUser) session.getAttribute("user");
            Boolean userIsViewingOwnProfile = viewedUser.getUsername().equals(user.getUsername()) ? true : false;
            if (viewedUser == null) {
                response.sendRedirect("browse.jsp");
            }
        %>

        <!-- navbar -->
        <div class="navbar">
            <div class="navbar-inner">
                <a class="brand" href="#"><b class ="life">Life</b><b class = "book">Book</b></a>
                <ul class="nav">
                    <li><a href ="browse.jsp"><span class ="navbarText"><i class = "icon-home icon-white"></i> Home</span></a></li>
                    <li><a href ="users.jsp"><span class ="navbarText"><i class = "icon-user icon-white"></i> Users</span></a></li>
                    <li class ="active"><a href ="users/<%=user.getUsername()%>"><span class ="navbarText"><i class = "icon-list-alt icon-white"></i> Profile</span></a></li>
                </ul>
                <button class="btn pull-right btn-success" onClick ="location.href = 'LogoutServlet';">Logout</button>
            </div>
        </div>

        <!-- User Info -->
        <div class="container">
            <div class="row">
                <!--left column-->
                <div class="span3" style = "background-color:rgba(80,80,80,0.1)">
                    <center>
                        <h2><%=viewedUser.getUsername()%></h2>
                        <img class ="thumbnail" width ="200" src = "/LifeBook/userimages/<%=viewedUser.getUsername()%>">
                        <br>
                        <h4>Followers: <span id ="followerCurrentCount"><%=viewedUser.getFollowerCount()%></span></h4>
                        <h4>Following: <%=viewedUser.getFollowingCount()%></h4>
                        <%
                            if (userIsViewingOwnProfile) {
                        %>
                        <div>
                            <!-- Upload Button -->
                            <div class ="well" style = "background-color:rgba(80,80,80,0.1)">
                                <center>
                                    <span id='uploadImageButton'>
                                        <h4>Select Image:</h4>
                                        <form enctype="multipart/form-data" method ="POST" action ="UploadUserImageServlet">
                                            <fieldset>
                                                <input class ='btn btn-success' onChange="this.form.submit();" accept="image/*" name ="imageFile" type = "file">
                                            </fieldset>
                                        </form>
                                    </span>
                                    <a onClick ='$("#uploadImageButton").toggle()'><button class = "btn btn-link">Edit Profile Image</button></a>
                                </center>
                            </div>
                        </div>
                    </center>
                    <%                                } else {
                    %>
                    <center>
                        <button onClick="followCurrentUser();" id ="followCurrentUserButton" class="btn btn-danger"><i id ="userCurrentLikeIcon" class="icon-white icon-heart"></i> <span id="isFollowingUserCurrentSpan"></span></button>
                    </center>
                    <%                        }
                    %>
                    <center><h3>User Info:</h3></center>
                    <div class ="well well-small" style="background-color: rgba(80,80,80,0.1)">
                        <h4>Email:</h4>
                        <%=viewedUser.getEmail()%>
                        <h4>Name:</h4>
                        <%=viewedUser.getFirstName() + " " + viewedUser.getLastName()%>
                        <h4>Sex:</h4>
                        <%=viewedUser.getSex() == 'M' ? "Male" : "Female"%>
                        <h4>Birthday:</h4>
                        <%=viewedUser.getBirthDay()%>
                        <h4>About Me:</h4>
                        <p class ="well" style="background-color: rgba(80,80,80,0.1)"><%=viewedUser.getAboutMe()%></p>   
                        <%
                            if (userIsViewingOwnProfile) {
                        %>
                        <center><a class ="editProfile" href = "editProfile.jsp"><button class = "btn btn-link">Edit Profile</button></a></center>
                            <%                                }
                            %>
                    </div>
                    <div>

                    </div> 
                </div>

                <!--right column-->
                <div class="span9" style = "background-color:rgba(80,80,80,0.1)">
                    <div class = "span8">
                        <form action ="ViewUserGalleryServlet">
                            <input type ="hidden" name="username" value ="<%=viewedUser.getUsername()%>">
                            <h2>&nbsp <a onclick="$(this).closest('form').submit()">Gallery</a></h2>
                        </form>
                        <div class ='well' style = "background-color:rgba(80,80,80,0.1)">
                            <% LifebookImageSearchParameters imageParameters = new LifebookImageSearchParameters(viewedUser.getUsername(), 1);
                                List<LifebookImage> imageList = DB.getImages(imageParameters);%>

                            <div id="userGallery" class="carousel slide">
                                <!-- Carousel items -->
                                <div class="carousel-inner">
                                    <%for (int i = 0; i < imageList.size(); i++) {%>
                                    <div class="item<%= i == 0 ? " active" : ""%>">
                                        <div class ="row span7">
                                            <%for (int j = i; j <= i + 5 && j < imageList.size(); j++) {
                                                    LifebookImage image = imageList.get(j);%>

                                            <!-- Image Thumbnail -->
                                            <img style ="width: 100px; height: 100px"onClick ="openImageModal(
                                '<%=image.getImageID()%>', '<%=image.getWidth()%>', '<%=image.getHeight()%>', '<%=image.getImageTitle()%>',
                                '<%=image.getImageCaption()%>', '<%=image.getLikes()%>', '<%=image.getOwnerUsername()%>');"
                                                 src="images/<%=image.getImageID()%>" Title="<%=image.getImageTitle()%>">

                                            <%}%>
                                        </div>
                                    </div>
                                    <%i += 5;
                                        }%>
                                </div>
                                <!-- Carousel nav -->
                                <a class="carousel-control left" href="#userGallery" data-slide="prev">&lsaquo;</a>
                                <a class="carousel-control right" href="#userGallery" data-slide="next">&rsaquo;</a>
                            </div>

                        </div>
                        <h2>&nbsp Followers</h2>
                        <div class ='well' style = "background-color:rgba(80,80,80,0.1)">
                            <%LifebookUserSearchParameters followerParameters = new LifebookUserSearchParameters(viewedUser.getUsername(), LifebookUserSearchParameters.SEARCH_FOLLOWERS);
                                List<LifebookUser> followerList = DB.searchLifebookUsers(followerParameters);%>

                            <div id="userFollowers" class="carousel slide">
                                <!-- Carousel items -->
                                <div class="carousel-inner">
                                    <%for (int i = 0; i < followerList.size(); i++) {%>
                                    <div class="item<%= i == 0 ? " active" : ""%>">
                                        <div class ="row span7">
                                            <%for (int j = i; j <= i + 5 && j < followerList.size(); j++) {
                                                    LifebookUser follower = followerList.get(j);%>
                                            <img title="<%=follower.getUsername()%>" onclick="openUserModal('<%=follower.getUsername()%>')" style ="width: 100px; height: 100px" src ="userimages/<%=follower.getUsername()%>">
                                            <%}%>
                                        </div>
                                    </div>
                                    <%i += 5;
                                        }%>
                                </div>
                                <!-- Carousel nav -->
                                <a class="carousel-control left" href="#userFollowers" data-slide="prev">&lsaquo;</a>
                                <a class="carousel-control right" href="#userFollowers" data-slide="next">&rsaquo;</a>
                            </div>
                        </div>
                        <h2>&nbsp Following</h2>
                        <div class ='well' style = "background-color:rgba(80,80,80,0.1)">
                            <%LifebookUserSearchParameters followingParameters = new LifebookUserSearchParameters(viewedUser.getUsername(), LifebookUserSearchParameters.SEARCH_FOLLOWING);
                                List<LifebookUser> followingList = DB.searchLifebookUsers(followingParameters);%>

                            <div id="userFollowing" class="carousel slide">
                                <!-- Carousel items -->
                                <div class="carousel-inner">
                                    <%for (int i = 0; i < followingList.size(); i++) {%>
                                    <div class="item<%= i == 0 ? " active" : ""%>">
                                        <div class ="row span7">
                                            <%for (int j = i; j <= i + 5 && j < followingList.size(); j++) {
                                                    LifebookUser following = followingList.get(j);%>
                                            <img title="<%=following.getUsername()%>" onclick="openUserModal('<%=following.getUsername()%>')" style ="width: 100px; height: 100px" src ="userimages/<%=following.getUsername()%>">
                                            <%}%>
                                        </div>
                                    </div>
                                    <%i += 5;
                                        }%>
                                </div>
                                <!-- Carousel nav -->
                                <a class="carousel-control left" href="#userFollowing" data-slide="prev">&lsaquo;</a>
                                <a class="carousel-control right" href="#userFollowing" data-slide="next">&rsaquo;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- View Image Modal-->
    <div id="imageViewModal" class="modal hide fade upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <center>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h2 id ="viewTitle"style ="display:inline;" id="myModalLabel">Title</h2> <a id = "openUserButton" onClick = "openUserModal();" data-toggle ="modal"><h4 id ="viewUser" style ="display:inline;">by Username</h4></a>
                <h4 id = "viewCaption">Caption</h4>
            </center>
        </div>
        <div class="modal-body upload">
            <center>
                <div id ="imageCanvas"></div>
            </center>
        </div>
        <div class="modal-footer">
            <center>
                <button onClick="likeImage(new Boolean(true));" id ="viewLikeButton" class="btn btn-large"><i id ="likeIcon" class="icon-heart"></i><span id="likeCounter"></span></button>
                <button class="btn btn-large btn-inverse" data-dismiss="modal" aria-hidden="true">Close</button>
                <button id ="deleteButton" class="btn btn-danger btn-large pull-right" hidden="true" href="#deactivatePhotoModal" data-toggle="modal"><i class="icon-white icon-trash"></i></button>
            </center>
        </div>
    </div>

    <script src="js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="js/masonry.pkgd.min.js"></script>
    <script src="js/imagesloaded.pkgd.js"></script>
    <script src="js/bootstrap.file-input.js"></script>
    <script src="js/kinetic-v4.5.5.min.js"></script> 
    <script src="js/imageTagging.js"></script>

    <!-- Deactivate Photo Modal -->
    <div id="deactivatePhotoModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <center>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Confirm Deactivation</h3>
            </center>
        </div>
        <div class="modal-body">
            <center><h4>Are you sure that you want to delete the photo?</h4></center>
        </div>
        <div class="modal-footer">
            <center>
                <div class ="row">
                    <button class = "btn btn-large btn-primary input-xlarge" data-dismiss="modal" aria-hidden="true">I don't want to</button>
                </div>
                <div class ="row">
                    <button class = "btn btn-mini btn-danger" onClick="deletePhoto();">Yes</button>
                </div>
            </center>
        </div>
    </div>

    <!--Modal for user-->
    <div id ="userModal" class = "modal hide fade">
        <div class ="modal-header">
            <a class="close" data-dismiss="modal">&times;</a>
            <center>
                <a id ="userModalProfileLink" href = "#"><h1 id = "userModalUsername" >Username</h1></a>
            </center>
        </div>
        <div id ="userBody" class="modal-body">
            <center>
                <img id ="userModalImage" width ="300" src ="noProfileImage.png" class = "thumbnail">
                <h5 class ='well' id ="userModalAboutMe">This is my Description</h5>
            </center>
        </div>
        <div id ="userFooter" class="modal-footer">
            <center>
                <button onClick="followUser();" id ="followUserButton" class="btn btn-danger"><i id ="userLikeIcon" class="icon-white icon-heart"></i> <span id="isFollowingUserSpan"></span></button>
                <button class = "btn btn-inverse" data-dismiss="modal" aria-hidden="true">Close</button>
            </center>
        </div>
    </div>

    <!-- View Pin Modal -->
    <div id ="viewPinModal" class="modal hide">
        <div class="modal-body">
            <div class ="span3 offset1">
                <h4>Pin Info:</h4>
                <h5 id ="viewPinInfo" class ="well well-small"></h5>
                <h4>Category:</h4> 
                <h5 id ="viewPinCategory" class ="well well-small"></h5>
                <h4>Tags</h4>
                <h5 id ="viewPinTags" class ="well well-small"></h5>
                <center>
                    <a onclick="browseRelatedPins($('#viewPinCategory').html(), $('#viewPinTags').html());"><h4>Browse related pins</h4></a>
                </center>
                <input type ="hidden" id ="viewPinID">
            </div>
        </div>
        <div class="modal-footer">
            <center>
                <button onClick="viewLikePin($('#viewPinID').val());" id ="viewPinLikeButton" class="btn btn-small"><i id ="viewPinLikeIcon" class="icon-heart"></i><span id="viewPinLikeCounter"></span></button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </center>
        </div>
    </div>

    <!-- Edit Pin Modal -->
    <div id ="editPinModal" class="modal hide">
        <div class="modal-body">
            <center>
                <h4>Pin Info:</h4> <input id ="editPinInfo" type="text" class ="input-xlarge" placeholder="This is my Ferrari">
                <h4>Category:</h4> 
                <select id = "editPinCategory" class ="input-xlarge">
                    <%
                        for (String category : DB.getCategories()) {
                    %>
                    <option><%=category%></option>
                    <%                            }
                    %>
                </select>
                <h4>Tags (Separated by a comma):</h4> <input id ="editPinTag" type="text" class ="input-xlarge" placeholder="ferrari, dynamite fishing, yolo">
                <a onclick="browseRelatedPins($('#editPinCategory').val(), $('#editPinTag').val());"><h4>Browse related pins</h4></a>
                <input type ="hidden" id ="editPinID">
            </center>
        </div>
        <div class="modal-footer">
            <center>
                <button onClick="editLikePin($('#editPinID').val());" id ="editPinLikeButton" class="btn btn-small"><i id ="editPinLikeIcon" class="icon-heart"></i><span id="editPinLikeCounter"></span></button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-success" onClick ="confirmEdit($('#editPinInfo').val(),
                                $('#editPinCategory').val(), $('#editPinTag').val(), $('#editPinID').val());">Edit Pin</button>
                <button id ="deleteButton" class="btn btn-danger btn-small pull-right" 
                        onClick="$('#deletePinModal').modal('show');"><i class="icon-white icon-trash"></i></button>
            </center>
        </div>
    </div>

    <!-- Delete Pin Modal -->
    <div id="deletePinModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <center>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Confirm Deactivation</h3>
            </center>
        </div>
        <div class="modal-body">
            <center><h4>Are you sure that you want to delete the pin?</h4></center>
        </div>
        <div class="modal-footer">
            <center>
                <div class ="row">
                    <button class = "btn btn-large btn-primary input-xlarge" data-dismiss="modal" aria-hidden="true">I don't want to</button>
                </div>
                <div class ="row">
                    <button class = "btn btn-mini btn-danger" 
                            onClick="$('#deletePinModal').modal('hide'),
                                $('#editPinModal').modal('hide'),
                                deletePin($('#editPinID').val());">Yes</button>
                </div>
            </center>
        </div>
    </div>

    <!-- Add Pin Edit Mode Modal -->
    <div height ="100%" id="addPinEditModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-body">
            <center>
                <h4>Pin Info:</h4> <input id ="addPinEditInfo" type="text" class ="input-xlarge" placeholder="This is my Ferrari">
                <h4>Category:</h4> 
                <select id = "addPinEditCategory" class ="input-xlarge">
                    <%
                        for (String category : DB.getCategories()) {
                    %>
                    <option><%=category%></option>
                    <%                            }
                    %>
                </select>
                <h4>Tags (Separated by a comma):</h4> <input id ="addPinEditTags" type="text" class ="input-xlarge" placeholder="ferrari, dynamite fishing, yolo">
                <input type ="hidden" id="addPinEditX">
                <input type ="hidden" id="addPinEditY">
            </center>
        </div>
        <div class="modal-footer">
            <center>
                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn-success" onClick ="addNewPin($('#addPinEditInfo').val(), $('#addPinEditCategory').val(),
                                $('#addPinEditTags').val(), $('#addPinEditX').val(), $('#addPinEditY').val());">Add Pin</button>
            </center>
        </div>
    </div>


    <!-- Open User Modal -->
    <script>
                    var currentViewedUser;
                    function openUserModal(username) {
                        $.ajax({
                            type: 'POST',
                            url: '/LifeBook/GetUserFromUsernameServlet',
                            data: {
                                username: username
                            },
                            success: function(msg) {
                                var user = eval("(" + msg + ")");
                                $("#userModalProfileLink").attr("href", "users/" + user.username);
                                $("#userModalImage").attr("src", "userimages/" + user.username);
                                $("#userModalUsername").html(user.username);
                                $("#userModalAboutMe").html(user.aboutme);
                                currentViewedUser = user.username;
                                
                                if ('<%=user.getUsername()%>' === user.username)
                                    $('#followUserButton').hide();
                                else
                                    $('#followUserButton').show();
                                
                                if (user.userIsLikedByCurrentUser) {
                                    $('#isFollowingUserSpan').html("(" + user.followerCount + ") Following");
                                    $('#userLikeIcon').addClass("icon-white");
                                    $('#followUserButton').addClass("btn-danger");
                                    $('#followUserButton').addClass("active");
                                } else {
                                    $('#isFollowingUserSpan').html("(" + user.followerCount + ") Follow");
                                    $('#userLikeIcon').removeClass("icon-white");
                                    $('#followUserButton').removeClass("btn-danger");
                                    $('#followUserButton').removeClass("active");
                                }
                            }
                        });

                        $('#userModal').modal('show');
                    }
    </script>

    <!-- User follows another user -->
    <script>
        function followUser() {
            $.ajax({
                type: 'POST',
                url: '/LifeBook/FollowUserServlet',
                data: {
                    user: currentViewedUser,
                    currentUser: '<%=user.getUsername()%>'
                },
                success: function(msg) {
                    var user = eval("(" + msg + ")");
                    if (user.userIsLikedByCurrentUser) {
                        $('#isFollowingUserSpan').html("(" + user.followerCount + ") Following");
                        $('#userLikeIcon').addClass("icon-white");
                        $('#followUserButton').addClass("btn-danger");
                        $('#followUserButton').addClass("active");
                    } else {
                        $('#isFollowingUserSpan').html("(" + user.followerCount + ") Follow");
                        $('#userLikeIcon').removeClass("icon-white");
                        $('#followUserButton').removeClass("btn-danger");
                        $('#followUserButton').removeClass("active");
                    }
                }
            });
        }
    </script>

    <!-- Open Image Modal-->
    <script>
        var currentImageID;
        var isEditMode = new Boolean();
        function openImageModal(imageID, imageWidth, imageHeight, imageTitle, imageCaption, imageLikes, imageOwner) {
            var imageSource = "images/" + imageID;
            $("#viewTitle").html(imageTitle);
            $("#viewCaption").html(imageCaption);
            $("#viewUser").html("by " + imageOwner);
            $("#likeCounter").html(imageLikes);
            if (imageOwner === '<%=user.getUsername()%>') {
                $("#deleteButton").show();
            } else {
                $("#deleteButton").hide();
            }
            currentImageID = imageID;
            isEditMode = '<%=user.getUsername()%>' === imageOwner;

            $("#openUserButton").attr("onClick", 'openUserModal("' + imageOwner + '")');

            likeImage(false);
            updateCanvasImage(imageSource, imageWidth, imageHeight);

            $('#imageViewModal').modal('show');
        }

        function updateCanvasImage(imageSource, imageWidth, imageHeight) {
            var source = imageSource;
            var width = imageWidth;
            var height = imageHeight;
            initCanvas("imageCanvas", source, width, height, false, isEditMode);
            loadPins(currentImageID);
        }
    </script>

    <!-- Delete Image -->
    <script>
        function deletePhoto() {
            $.ajax({
                type: 'POST',
                url: '/LifeBook/DeleteImageServlet',
                data: {
                    imageID: currentImageID
                },
                success: function(msg) {
                    //var result = eval("(" + msg + ")");
                    location.reload();
                }
            });
        }
    </script>

    <!-- Like Image -->
    <script>
        function likeImage(updateDatabase) {
            $.ajax({
                type: 'POST',
                url: '/LifeBook/UserLikesAnImage',
                data: {username: '<%=user.getUsername()%>', imageID: currentImageID, updateDatabase: updateDatabase},
                success: function(msg) {
                    var result = eval("(" + msg + ")");
                    if (result.imageIsLikedByUser) {
                        $('#likeIcon').addClass("icon-white");
                        $('#viewLikeButton').addClass("btn-danger");
                        $('#viewLikeButton').addClass("active");
                    } else {
                        $('#likeIcon').removeClass("icon-white");
                        $('#viewLikeButton').removeClass("btn-danger");
                        $('#viewLikeButton').removeClass("active");
                    }
                    $('#likeCounter').html(result.likeCount);
                }
            });
        }
    </script>

    <!-- Check if user is followed -->
    <script>
        var currentViewedUser;
        function setUserIsFollowing(username) {
            $.ajax({
                type: 'POST',
                url: '/LifeBook/GetUserFromUsernameServlet',
                data: {
                    username: username
                },
                success: function(msg) {
                    var user = eval("(" + msg + ")");
                    currentViewedUser = user.username;
                    if (user.userIsLikedByCurrentUser) {
                        $('#isFollowingUserCurrentSpan').html("Following");
                        $('#userCurrentLikeIcon').addClass("icon-white");
                        $('#followCurrentUserButton').addClass("btn-danger");
                        $('#followCurrentUserButton').addClass("active");
                    } else {
                        $('#isFollowingUserCurrentSpan').html("Follow");
                        $('#userCurrentLikeIcon').removeClass("icon-white");
                        $('#followCurrentUserButton').removeClass("btn-danger");
                        $('#followCurrentUserButton').removeClass("active");
                    }
                }
            });
        }
    </script>

    <!-- User follows another user -->
    <script>
        function followCurrentUser() {
            $.ajax({
                type: 'POST',
                url: '/LifeBook/FollowUserServlet',
                data: {
                    user: '<%=viewedUser.getUsername()%>',
                    currentUser: '<%=user.getUsername()%>'
                },
                success: function(msg) {
                    var user = eval("(" + msg + ")");
                    if (user.userIsLikedByCurrentUser) {
                        $('#followerCurrentCount').html(user.followerCount);
                        $('#isFollowingUserCurrentSpan').html("Following");
                        $('#userCurrentLikeIcon').addClass("icon-white");
                        $('#followCurrentUserButton').addClass("btn-danger");
                        $('#followCurrentUserButton').addClass("active");
                    } else {
                        $('#followerCurrentCount').html(user.followerCount);
                        $('#isFollowingUserCurrentSpan').html("Follow");
                        $('#userCurrentLikeIcon').removeClass("icon-white");
                        $('#followCurrentUserButton').removeClass("btn-danger");
                        $('#followCurrentUserButton').removeClass("active");
                    }
                }
            });
        }
    </script>

    <script>
        $(document).ready(function() {
            $("#uploadImageButton").hide();
            $('input[type=file]').bootstrapFileInput();
            setUserIsFollowing('<%=viewedUser.getUsername()%>');
        });
    </script>

    <script>
        var container = document.querySelector('.masonry');
        var msnry;
        // initialize Masonry after all images have loaded
        imagesLoaded(container, function() {
            msnry = new Masonry(container);
        });
    </script>
</body>
</html>
